import React from 'react';
import moment from 'moment';
import classNames from 'classnames';
import {getLastReply} from '../../../services/cnode'
import {TAB} from '../../../common/Const';
import './style.css'
// import {Loading} from '../../../components/Loading';

export class Topic extends React.Component {

    render() {
        const item = this.props.topic;
        return <li id={item.id}>
            <h4>{item.title}</h4>
            <div>{item.content}</div>
        </li>
    }
}

export class TopicTitle extends React.Component {

    constructor(props) {
        super(props);
        this.lastReply = {};
        this.state = {
            loading: false
        }
    }

    componentDidMount() {
        const {id} = this.props.topic;
        getLastReply(id).then(data =>{
            this.lastReply = data || {};
            this.setState({
                loading: true
            });
        });
    }

    render() {
        const item = this.props.topic;
        const {author, last_reply_at:lastReplyTime} = item;
        const {author:replyAuthor} = this.lastReply;
        return <div id ={item.id} className={classNames("cell")}>
            <Author {...author}/>
            <Count {...item}/>
            <Tab {...item}/>
            <Title title={item.title}/>
            <LastReply {...replyAuthor} lastReplyTime={lastReplyTime}/>
        </div>
    }
}

class Author extends React.Component {
    render() {
        const {avatar_url, loginname} = this.props;
        return <span className={"user_avatar pull-left"}>
            <img src={avatar_url} alt={loginname} title={loginname}/>
        </span>
    }
}

class Count extends React.Component {
    render() {
        const {reply_count:replyCount, visit_count:visitCount} = this.props;
        return <span className={classNames("reply_count pull-left")}>
            <span className={classNames("count_of_replies")} title={"回复数"}>{replyCount}</span>
            <span className={classNames("count_seperator")}> / </span>
            <span className={classNames("count_of_visits")} title={"点击数"}>{visitCount}</span>
        </span>
    }
}

class Tab extends React.Component {
    getTab() {
        const {tab} = this.props;
        return TAB[tab];
    }
    render() {
        const tab = this.getTab();
        return (
            <span className={classNames("put_top")}>
                {tab}
            </span>
        );
    }
}

class Title extends React.Component{
    render() {
        return (
            <span className={classNames("topic_title")} href ="script:void()">
                {this.props.title}
            </span>
        );
    }
}

class LastReply extends React.Component{
    render() {
        const {avatar_url, loginname} = this.props;
        return (
            <span href={"./"} className={classNames("last_time pull-right")}>
                <img className={"user_small_avatar"} src={avatar_url} alt={loginname} title={loginname}/>
                <span className={classNames("last_active_time")}>{this.formatterDate()}</span>
            </span>
        );
    }

    formatterDate() {
        const {lastReplyTime} = this.props;
        return moment(lastReplyTime).fromNow();
    }
}
